<template>
  <van-popup
    v-model="dialogShow"
    closeable
    position="bottom"
    @open="onOpen"
    :style="{ height: '80%' }"
  >
    <div class="popup-title">选择隐患分类</div>
    <div class="popup-content">
      <div class="main">
        <div
          v-for="(item, index) in data.filter((item) => item.PID == '00')"
          :key="index"
        >
          <div class="ml-10" style="padding-top: 10px">
            <div class="title">{{ item.Name }}</div>
          </div>
          <div class="mt-10 ml-10 mr-10">
            <div class="d-name"
              v-for="(item2, index2) in data.filter((b) => b.PID == item.ID)"
              :key="index2"
               @click="handleclick(item2)"
            >
             
                {{ item2.Name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    show: {},
  },
  data() {
    return {
      data: [],
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  methods: {
    onOpen() {
      if (this.data.length == 0) {
        this.$axios.get("/SyDangerType/GetDangerTypes").then((res) => {
          if (res.success) {
            this.data = res.data;
          }
        });
      }
    },
    // 选择隐患分类
    handleclick(item) {
      let data = {
        DType: item.PID,
        DName: item.Name,
        DCode: item.ID,
      };
      let param = this.data.filter((res) => res.ID == item.PID)[0];
      data.DTypeName = param.Name;
      data.DFullName = data.DTypeName + ">" + data.DName;
      this.$emit("callback", data);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  background-color: #e8f1f8;
}
.title {
  padding-left: 5px;
  border-left: 3px solid rgb(0, 195, 224);
}

.d-name {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left:10px;
  padding-right:10px;
  min-width: 100px;
}
</style>